<template>
  <div class="portal-container">
    <el-container>
      <Aside></Aside>

      <el-container class="header-main-container">
        <Header @logout="logout" :userInfo="userInfo"></Header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getItem, removeItem, setItemFromSession } from "@/utils/storage";
import Aside from "./components/aside";
import Header from "./components/header";
import { logout, getUserInfo } from "@/api/adminUser";
import { mapState } from "vuex";

export default {
  name: "PortalIndex",
  components: { Aside, Header },
  props: {},
  data() {
    return {
      userInfo: {}, // 登录用户信息
    };
  },
  created() {
    // 监听页面刷新
    this.listenPageReload();
    // 判断用户是否登录
    this.judgeIsLogin();
    // 用户登录了才发送请求获取用户数据
    if (this.user) {
      this.loadUserInfo();
      // 用户勾选自动登录后，会将token保存到localStorage中，下次打开页面会自动登录，当sessionStorage生命周期为一个会话
      // 所以用户自动登录成功后将token也保存到sessionStorage中一份
      this.saveToken();
    }
  },
  mounted() {},
  methods: {
    /* 监听页面刷新事件，让页面在刷新后，默认展示会员管理 */
    listenPageReload() {
      window.onload = () => {
        this.$router.push("/user/commonUser");
      };
    },
    // 判断用户是否登录
    judgeIsLogin() {
      // 如果vuex中没有用户token，说明未登录
      if (!this.user) {
        this.$router.push("/login");
      }
    },
    // 将localStorage中的token保存在sessionStorage中
    saveToken() {
      const token = getItem("token");
      if (token) {
        setItemFromSession("token", token);
      }
    },
    // 获取用户信息
    async loadUserInfo() {
      try {
        const { data } = await getUserInfo();
        this.userInfo = data.data;
      } catch (err) {
        this.$message.error("用户信息获取失败");
      }
    },
    // 退出登录
    async logout() {
      try {
        const { data } = await logout();
        if (String(data.code) === "200") {
          this.userInfo = {};
          // 1. 清除sessionStorage中的token
          sessionStorage.clear();
          // 2. 清空localstorage中的token
          removeItem("token");
          // 3. 跳转到登录页面
          this.$router.push("/login");
          // 4. 刷新页面，清空vuex中的数据
          window.location.reload();
        }
      } catch (err) {
        console.log(err);
        this.$message.error("退出失败，请稍后重试");
      }
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {},
};
</script>

<style scoped lang="less">
.portal-container {
  height: 100%;

  .el-container {
    height: 100%;
    background: #f3f4f7;
  }

  .header-main-container {
    flex-direction: column;

    .el-main {
      margin: 20px 20px 0 20px;
      background-color: #fff;
    }
  }
}
</style>
